<template>
  <div style="width: 100%; height: 100%">
    <div class="mapChoose">
      <div>
        <span v-for="(item, index) in parentInfo" :key="item.code">
          <span class="title" @click="chooseArea(item, index)">{{
            item.cityName == "全国" ? "中国" : item.cityName
          }}</span>
          <span class="icon" v-show="index + 1 != parentInfo.length">></span>
        </span>
      </div>
      <span class="tool" @click="goToChinaMapPage">
        {{ $store.state.fullScreenStatus["chinaMap"] ? "返回主页" : "全屏" }}
      </span>
    </div>
    <div class="china-map" ref="allMap"></div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-14 08:00:53
 *@Description: 模块描述
 */
import * as echarts from "echarts"
import { mapMutations } from "vuex"
export default {
  name: "",
  data() {
    return {
      myCharts: null,
      geoJson: {
        features: [],
      },
      parentInfo: [
        {
          cityName: "全国",
          code: 100000,
        },
      ],
      timeTitle: ["2016", "2017", "2018", "2019", "2020"],
    }
  },
  created() {},
  destroyed() {
    this.myCharts.off("click")
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", () => {
      this.getGeoJson(100000, "resize")
    })
  },
  mounted() {
    this.getGeoJson(100000, "init")
    window.addEventListener("resize", () => {
      this.getGeoJson(100000, "resize")
    })
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    goToChinaMapPage() {
      if (!this.$store.state.fullScreenStatus.chinaMap) {
        this.$router.push("/chinaMapPage")
        this.changeFullScreenStatus({ type: "chinaMap", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "chinaMap", value: false })
      }
    },
    // 是初始化还是尺寸变了
    getGeoJson(adcode, type) {
      let that = this
      // eslint-disable-next-line no-undef
      AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
        var districtExplorer = new DistrictExplorer()
        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
          if (error) {
            console.error(error)
            return
          }
          let Json = areaNode.getSubFeatures()
          if (Json.length > 0) {
            that.geoJson.features = Json
          } else if (Json.length === 0) {
            that.geoJson.features = that.geoJson.features.filter(
              (item) => item.properties.adcode == adcode
            )
            if (that.geoJson.features.length === 0) return
          }
          that.getMapData(type)
        })
      })
    },
    //获取数据
    getMapData(type) {
      let mapData = {},
        pointData = {},
        sum = {}
      this.timeTitle.forEach((item) => {
        mapData[item] = []
        pointData[item] = []
        sum[item] = 0
        this.geoJson.features.forEach((j) => {
          let value = Math.random() * 3000
          mapData[item].push({
            name: j.properties.name,
            value: value,
            cityCode: j.properties.adcode,
          })
          pointData[item].push({
            name: j.properties.name,
            value: [j.properties.center[0], j.properties.center[1], value],
            cityCode: j.properties.adcode,
          })
          sum[item] += value
        })
        mapData[item] = mapData[item].sort(function (a, b) {
          return b.value - a.value
        })
      })
      if (type === "init" || !type) {
        this.initEcharts(mapData, pointData, sum)
      } else if (type === "resize") {
        this.screenUpdate(mapData, pointData, sum)
      }
    },
    initEcharts(mapData, pointData, sum) {
      const _this = this
      this.myCharts = this.$echarts.init(this.$refs.allMap)
      if (this.parentInfo.length === 1) {
        this.$echarts.registerMap("china", this.geoJson) //注册
      } else {
        this.$echarts.registerMap("map", this.geoJson) //注册
      }
      var option = {
        timeline: {
          show: false,
          data: _this.timeTitle,
          axisType: "category",
          autoPlay: true,
          playInterval: 3000,
          left: "10%",
          right: "10%",
          bottom: "2%",
          width: "80%",
          label: {
            normal: {
              textStyle: {
                color: "rgb(179, 239, 255)",
              },
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          symbolSize: _this.$fitChartFont(10),
          lineStyle: {
            color: "#8df4f4",
          },
          checkpointStyle: {
            borderColor: "#8df4f4",
            color: "#53D9FF",
            borderWidth: _this.$fitChartFont(2),
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: "#53D9FF",
              borderColor: "#53D9FF",
            },
            emphasis: {
              color: "rgb(58,115,192)",
              borderColor: "rgb(58,115,192)",
            },
          },
        },
        baseOption: {
          animation: true,
          animationDuration: 900,
          animationEasing: "cubicInOut",
          animationDurationUpdate: 900,
          animationEasingUpdate: "cubicInOut",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            right: "2%",
            top: "12%",
            bottom: "8%",
            width: "20%",
          },
          // toolbox: {
          //     feature: {
          //         restore: {
          //             show: false
          //         },
          //         dataView: {
          //             optionToContent: function (opt) {
          //                 let series = opt.series[0].data //折线图数据
          //                 let tdHeads =
          //                     '<th  style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>' //表头
          //                 // let tdBodys = '' //数据
          //                 let table =
          //                     `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
          //                 for (let i = 0; i < series.length; i++) {
          //                     table += `<tr>
          //       <td style="padding: 0 50px">${series[i].name}</td>
          //       <td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
          //       </tr>`
          //                 }
          //                 table += '</tbody></table>'
          //                 return table
          //             }
          //         },
          //         saveAsImage: {
          //             name: _this.parentInfo[_this.parentInfo.length - 1].cityName + '销售额统计图'
          //         },
          //         dataZoom: {
          //             show: false
          //         },
          //         magicType: {
          //             show: false
          //         }
          //     },
          //     iconStyle: {
          //         normal: {
          //             borderColor: '#1990DA'
          //         }
          //     },
          //     top: 15,
          //     right: 35
          // },
          geo: {
            map: _this.parentInfo.length === 1 ? "china" : "map",
            zoom: _this.$fitChartFont(1),
            roam: true,
            center:
              _this.parentInfo.length === 1
                ? ["118.03531246", "37.0267395887"]
                : false,
            tooltip: {
              trigger: "item",
              formatter: (p) => {
                let val = p.value[2]
                if (window.isNaN(val)) {
                  val = 0
                }
                let txtCon =
                  "<div style='text-align:left' class='geo-title-text'>" +
                  p.name +
                  ":<br />销售额：" +
                  val.toFixed(2) +
                  "万</div>"
                return txtCon
              },
            },
            label: {
              normal: {
                show: true,
                color: "rgb(249, 249, 249)", //省份标签字体颜色
                fontSize: _this.$fitChartFont(12),
                formatter: (p) => {
                  switch (p.name) {
                    case "内蒙古自治区":
                      p.name = "内蒙古"
                      break
                    case "西藏自治区":
                      p.name = "西藏"
                      break
                    case "新疆维吾尔自治区":
                      p.name = "新疆"
                      break
                    case "宁夏回族自治区":
                      p.name = "宁夏"
                      break
                    case "广西壮族自治区":
                      p.name = "广西"
                      break
                    case "香港特别行政区":
                      p.name = "香港"
                      break
                    case "澳门特别行政区":
                      p.name = "澳门"
                      break
                    default:
                      break
                  }
                  return p.name
                },
              },
              emphasis: {
                show: true,
                color: "#f75a00",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#24CFF4",
                borderColor: "#53D9FF",
                borderWidth: _this.$fitChartFont(1.3),
                shadowBlur: _this.$fitChartFont(15),
                shadowColor: "rgb(58,115,192)",
                shadowOffsetX: _this.$fitChartFont(7),
                shadowOffsetY: _this.$fitChartFont(6),
              },
              emphasis: {
                areaColor: "#8dd7fc",
                borderWidth: _this.$fitChartFont(1.6),
                shadowBlur: _this.$fitChartFont(25),
              },
            },
          },
        },
        options: [],
      }
      _this.timeTitle.forEach((item) => {
        var xData = [],
          yData = []
        var min = mapData[item][mapData[item].length - 1].value
        var max = mapData[item][0].value
        if (mapData[item].length === 1) {
          min = 0
        }
        mapData[item].forEach((c) => {
          xData.unshift(c.name)
          yData.unshift(c.value)
        })
        option.options.push({
          title: [
            {
              left: "center",
              top: _this.$fitChartFont(10),
              text:
                item +
                _this.parentInfo[_this.parentInfo.length - 1].cityName +
                "年" +
                "医疗设备销售统计图(可点击下钻到县)",
              textStyle: {
                color: "rgb(179, 239, 255)",
                fontSize: _this.$fitChartFont(16),
              },
            },
            {
              text: "医疗销售总额：" + sum[item].toFixed(2) + "万",
              left: "center",
              top: "6.5%",
              textStyle: {
                color: "#FFAC50",
                fontSize: _this.$fitChartFont(26),
              },
            },
          ],
          visualMap: {
            show: false,
            min: min,
            max: max,
            left: "3%",
            bottom: "5%",
            calculable: true,
            seriesIndex: [0],
            inRange: {
              color: ["#24CFF4", "#2E98CA", "#1E62AC"],
            },
            textStyle: {
              color: "#24CFF4",
              fontSize: _this.$fitChartFont(12),
            },
          },
          xAxis: {
            type: "value",
            scale: true,
            position: "top",
            boundaryGap: false,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#455B77",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: _this.$fitChartFont(2),
              textStyle: {
                fontSize: _this.$fitChartFont(12),
                color: "#c0e6f9",
              },
            },
          },
          yAxis: {
            type: "category",
            nameGap: _this.$fitChartFont(16),
            axisLine: {
              show: true,
              lineStyle: {
                color: "#455B77",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: _this.$fitChartFont(12),
                color: "#c0e6f9",
              },
            },
            data: xData,
          },
          series: [
            {
              name: item + "销售额度",
              type: "map",
              geoIndex: 0,
              map: _this.parentInfo.length === 1 ? "china" : "map",
              roam: true,
              zoom: _this.$fitChartFont(1),
              tooltip: {
                trigger: "item",
                formatter: (p) => {
                  let val = p.value
                  if (p.name == "南海诸岛") return
                  if (window.isNaN(val)) {
                    val = 0
                  }
                  let txtCon =
                    "<div style='text-align:left' class='geo-title-text'>" +
                    p.name +
                    ":<br />销售额：" +
                    val.toFixed(2) +
                    "万</div>"
                  return txtCon
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              data: mapData[item],
            },
            {
              name: "散点",
              type: "effectScatter",
              coordinateSystem: "geo",
              rippleEffect: {
                brushType: "fill",
              },
              itemStyle: {
                normal: {
                  color: "#F4E925",
                  shadowBlur: _this.$fitChartFont(10),
                  shadowColor: "#333",
                },
              },
              data: pointData[item],
              // symbolSize: 8,
              symbolSize: function (val) {
                let value = val[2]
                if (value == max) {
                  return _this.$fitChartFont(27)
                }
                return _this.$fitChartFont(10)
              },
              showEffectOn: "render", //加载完毕显示特效
            },
            {
              type: "bar",
              barGap: "-100%",
              barCategoryGap: "55%",
              itemStyle: {
                normal: {
                  barBorderRadius: _this.$fitChartFont(30),
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgb(57,89,255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgb(46,200,207,1)",
                    },
                  ]),
                },
                emphasis: {
                  show: false,
                },
              },
              data: yData,
            },
          ],
        })
      })
      if (this.myCharts) {
        this.myCharts.setOption(option, true)
        this.myCharts.off("click")
        this.myCharts.on("click", this.echartsMapClick)
      }
    },
    updateEcharts() {},
    screenUpdate(mapData, pointData, sum) {
      const _this = this
      if (this.parentInfo.length === 1) {
        this.$echarts.registerMap("china", this.geoJson) //注册
      } else {
        this.$echarts.registerMap("map", this.geoJson) //注册
      }
      var option = {
        timeline: {
          show: false,
          data: _this.timeTitle,
          axisType: "category",
          autoPlay: true,
          playInterval: 3000,
          left: "10%",
          right: "10%",
          bottom: "2%",
          width: "80%",
          label: {
            normal: {
              textStyle: {
                color: "rgb(179, 239, 255)",
              },
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          symbolSize: _this.$fitChartFont(10),
          lineStyle: {
            color: "#8df4f4",
          },
          checkpointStyle: {
            borderColor: "#8df4f4",
            color: "#53D9FF",
            borderWidth: _this.$fitChartFont(2),
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: "#53D9FF",
              borderColor: "#53D9FF",
            },
            emphasis: {
              color: "rgb(58,115,192)",
              borderColor: "rgb(58,115,192)",
            },
          },
        },
        baseOption: {
          animation: true,
          animationDuration: 900,
          animationEasing: "cubicInOut",
          animationDurationUpdate: 900,
          animationEasingUpdate: "cubicInOut",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            right: "2%",
            top: "12%",
            bottom: "8%",
            width: "20%",
          },
          // toolbox: {
          //     feature: {
          //         restore: {
          //             show: false
          //         },
          //         dataView: {
          //             optionToContent: function (opt) {
          //                 let series = opt.series[0].data //折线图数据
          //                 let tdHeads =
          //                     '<th  style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>' //表头
          //                 // let tdBodys = '' //数据
          //                 let table =
          //                     `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`
          //                 for (let i = 0; i < series.length; i++) {
          //                     table += `<tr>
          //       <td style="padding: 0 50px">${series[i].name}</td>
          //       <td style="padding: 0 50px">${series[i].value.toFixed(2)}万</td>
          //       </tr>`
          //                 }
          //                 table += '</tbody></table>'
          //                 return table
          //             }
          //         },
          //         saveAsImage: {
          //             name: _this.parentInfo[_this.parentInfo.length - 1].cityName + '销售额统计图'
          //         },
          //         dataZoom: {
          //             show: false
          //         },
          //         magicType: {
          //             show: false
          //         }
          //     },
          //     iconStyle: {
          //         normal: {
          //             borderColor: '#1990DA'
          //         }
          //     },
          //     top: 15,
          //     right: 35
          // },
          geo: {
            map: _this.parentInfo.length === 1 ? "china" : "map",
            zoom: _this.$fitChartFont(1),
            roam: true,
            center:
              _this.parentInfo.length === 1
                ? ["118.03531246", "37.0267395887"]
                : false,
            tooltip: {
              trigger: "item",
              formatter: (p) => {
                let val = p.value[2]
                if (window.isNaN(val)) {
                  val = 0
                }
                let txtCon =
                  "<div style='text-align:left' class='geo-title-text'>" +
                  p.name +
                  ":<br />销售额：" +
                  val.toFixed(2) +
                  "万</div>"
                return txtCon
              },
            },
            label: {
              normal: {
                show: true,
                color: "rgb(249, 249, 249)", //省份标签字体颜色
                fontSize: _this.$fitChartFont(12),
                formatter: (p) => {
                  switch (p.name) {
                    case "内蒙古自治区":
                      p.name = "内蒙古"
                      break
                    case "西藏自治区":
                      p.name = "西藏"
                      break
                    case "新疆维吾尔自治区":
                      p.name = "新疆"
                      break
                    case "宁夏回族自治区":
                      p.name = "宁夏"
                      break
                    case "广西壮族自治区":
                      p.name = "广西"
                      break
                    case "香港特别行政区":
                      p.name = "香港"
                      break
                    case "澳门特别行政区":
                      p.name = "澳门"
                      break
                    default:
                      break
                  }
                  return p.name
                },
              },
              emphasis: {
                show: true,
                color: "#f75a00",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#24CFF4",
                borderColor: "#53D9FF",
                borderWidth: _this.$fitChartFont(1.3),
                shadowBlur: _this.$fitChartFont(15),
                shadowColor: "rgb(58,115,192)",
                shadowOffsetX: _this.$fitChartFont(7),
                shadowOffsetY: _this.$fitChartFont(6),
              },
              emphasis: {
                areaColor: "#8dd7fc",
                borderWidth: _this.$fitChartFont(1.6),
                shadowBlur: _this.$fitChartFont(25),
              },
            },
          },
        },
        options: [],
      }
      _this.timeTitle.forEach((item) => {
        var xData = [],
          yData = []
        var min = mapData[item][mapData[item].length - 1].value
        var max = mapData[item][0].value
        if (mapData[item].length === 1) {
          min = 0
        }
        mapData[item].forEach((c) => {
          xData.unshift(c.name)
          yData.unshift(c.value)
        })
        option.options.push({
          title: [
            {
              left: "center",
              top: _this.$fitChartFont(10),
              text:
                item +
                _this.parentInfo[_this.parentInfo.length - 1].cityName +
                "年" +
                "销售额统计图(可点击下钻到县)",
              textStyle: {
                color: "rgb(179, 239, 255)",
                fontSize: _this.$fitChartFont(16),
              },
            },
            {
              text: "销售总额：" + sum[item].toFixed(2) + "万",
              left: "center",
              top: "6.5%",
              textStyle: {
                color: "#FFAC50",
                fontSize: _this.$fitChartFont(26),
              },
            },
          ],
          visualMap: {
            show: false,
            min: min,
            max: max,
            left: "3%",
            bottom: "5%",
            calculable: true,
            seriesIndex: [0],
            inRange: {
              color: ["#24CFF4", "#2E98CA", "#1E62AC"],
            },
            textStyle: {
              color: "#24CFF4",
              fontSize: _this.$fitChartFont(12),
            },
          },
          xAxis: {
            type: "value",
            scale: true,
            position: "top",
            boundaryGap: false,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#455B77",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: _this.$fitChartFont(2),
              textStyle: {
                fontSize: _this.$fitChartFont(12),
                color: "#c0e6f9",
              },
            },
          },
          yAxis: {
            type: "category",
            nameGap: _this.$fitChartFont(16),
            axisLine: {
              show: true,
              lineStyle: {
                color: "#455B77",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: _this.$fitChartFont(12),
                color: "#c0e6f9",
              },
            },
            data: xData,
          },
          series: [
            {
              name: item + "销售额度",
              type: "map",
              geoIndex: 0,
              map: _this.parentInfo.length === 1 ? "china" : "map",
              roam: true,
              zoom: _this.$fitChartFont(1),
              tooltip: {
                trigger: "item",
                formatter: (p) => {
                  let val = p.value
                  if (p.name == "南海诸岛") return
                  if (window.isNaN(val)) {
                    val = 0
                  }
                  let txtCon =
                    "<div style='text-align:left' class='geo-title-text'>" +
                    p.name +
                    ":<br />销售额：" +
                    val.toFixed(2) +
                    "万</div>"
                  return txtCon
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              data: mapData[item],
            },
            {
              name: "散点",
              type: "effectScatter",
              coordinateSystem: "geo",
              rippleEffect: {
                brushType: "fill",
              },
              itemStyle: {
                normal: {
                  color: "#F4E925",
                  shadowBlur: _this.$fitChartFont(10),
                  shadowColor: "#333",
                },
              },
              data: pointData[item],
              // symbolSize: 8,
              symbolSize: function (val) {
                let value = val[2]
                if (value == max) {
                  return _this.$fitChartFont(27)
                }
                return _this.$fitChartFont(10)
              },
              showEffectOn: "render", //加载完毕显示特效
            },
            {
              type: "bar",
              barGap: "-100%",
              barCategoryGap: "55%",
              itemStyle: {
                normal: {
                  barBorderRadius: _this.$fitChartFont(30),
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgb(57,89,255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgb(46,200,207,1)",
                    },
                  ]),
                },
                emphasis: {
                  show: false,
                },
              },
              data: yData,
            },
          ],
        })
      })
      if (this.myCharts) {
        this.myCharts.setOption(option, true)
        this.myCharts.resize()
        this.myCharts.off("click")
        this.myCharts.on("click", this.echartsMapClick)
      }
    },
    //点击下钻
    echartsMapClick(params) {
      if (!params.data) {
        return
      }
      if (
        this.parentInfo[this.parentInfo.length - 1].code == params.data.cityCode
      ) {
        return
      }
      let data = params.data
      this.parentInfo.push({
        cityName: data.name,
        code: data.cityCode,
      })
      this.getGeoJson(data.cityCode)
    },
    //选择切换市县
    chooseArea(val, index) {
      if (this.parentInfo.length === index + 1) {
        return
      }
      this.parentInfo.splice(index + 1)
      this.getGeoJson(this.parentInfo[this.parentInfo.length - 1].code)
    },
  },
}
</script>

<style lang="scss" scoped>
.china-map {
  width: 100%;
  height: 100%;
  // background-color: red;
}
.geo-title-text {
  font-size: vw(10);
}
.mapChoose {
  display: flex;
  justify-content: space-between;
  color: white;
  padding: vw(5);
  .title {
    font-size: vw(20);
    cursor: pointer;
  }
  .tool {
    font-size: vw(20);
    cursor: pointer;
  }
}
</style>

